<!DOCTYPE html>
<html ng-app="esri-map-docs">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Angular Esri Map</title>

    <!-- load calcite-bootstrap css -->
    <link rel="stylesheet" href="lib/calcite-bootstrap-open.min.css">

    <!-- code snippet syntax highlighting -->
    <link rel="stylesheet" href="lib/github.min.css">

    <!-- load Esri CSS -->
    <link rel="stylesheet" href="lib/main.css">

    <!-- load custom styles for this app -->
    <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>

<body>
    <!-- top nav -->
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" ng-href="#/home">angular-esri-map</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{active: page === 'examples'}">
                    <a ng-href="#/examples">Examples</a>
                </li>
                <li ng-class="{active: page === 'patterns'}">
                    <a ng-href="#/patterns">Patterns</a>
                </li>
                <li>
                    <a href="./docs">API</a>
                </li>
                <li>
                    <a href="https://arcgis.github.io/angular-esri-map-site-v1/">Previous Version Docs</a>
                </li>
                <li>
                    <a href="https://github.com/Esri/angular-esri-map/blob/master/README.md#quick-start">Quick Start</a>
                </li>
                <li>
                    <a href="https://github.com/Esri/angular-esri-map/blob/master/README.md#what-about-angular-2">Angular 2</a>
                </li>
                <li>
                    <a href="https://github.com/esri/angular-esri-map">GitHub</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- main content container -->
    <div class="container">
        <!-- shared left nav controller for examples and patterns; also modifies styling of snippets and footer -->
        <div ng-controller="LeftNavCtrl">
            <!-- page content row -->
            <div class="row">

                <!-- apply a column size depending on if a left nav is visible -->
                <div ng-class="{
                        'col-sm-9 col-sm-push-3': (examplesLeftNavShow || patternsLeftNavShow),
                        'col-xs-12': !(examplesLeftNavShow || patternsLeftNavShow)
                    }">

                    <!-- page content for ngRoute -->
                    <div ng-view=""></div>

                    <!-- source code snippets -->
                    <div ng-controller="SnippetsCtrl" style="display:none;" ng-style="{display: (examplesLeftNavStyle || patternsLeftNavStyle)}">
                        <ul ng-show="tabs" class="nav nav-tabs" ng-select ng-model="currentTab" select-class="{'active': $optSelected}">
                            <li ng-repeat="tab in tabs" ng-select-option="tab">
                                <a href="" title="{{ tab }}">{{ tab.substr(tab.lastIndexOf('.') + 1).toUpperCase() }}</a>
                            </li>
                        </ul>
                        <div class="tab-container">
                            <div ng-repeat="tab in tabs">
                                <div ng-show="tab === currentTab">
                                    <div hljs="" include="currentTab"></div>
                                    <div class="snippet-file-name">{{ tab }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- left nav list group for example toc page and individual example pages -->
                <div class="col-sm-3 col-sm-pull-9" ng-if="examplesLeftNavShow" style="display:none;" ng-style="{display: examplesLeftNavStyle}">
                    <div ng-repeat="(categoryKeyName, examplesArray) in examplePageCategories">
                        <h4 class="page-header list-group-category">{{categoryKeyName}}</h4>
                        <div class="list-group">
                            <a href="{{example.toc.url}}"
                                class="list-group-item"
                                ng-class="{'active': example.route.controller === activeExample}"
                                ng-repeat="example in examplesArray">
                                {{example.toc.title}}
                            </a>
                        </div>
                    </div>
                </div>

                <!-- left nav list group for patterns pages -->
                <div class="col-sm-3 col-sm-pull-9" ng-if="patternsLeftNavShow" style="display:none;" ng-style="{display: patternsLeftNavStyle}">
                    <h4 class="page-header list-group-category">Patterns</h4>
                    <div class="list-group">
                        <a ng-href="{{'#' + page.path}}"
                            class="list-group-item"
                            ng-class="{'active': page.path === activePath}"
                            ng-repeat="page in patternsPages">
                            {{page.shortTitle}}
                        </a>
                    </div>
                </div>

            <!-- end page content row -->
            </div>

            <!-- page footer row -->
            <div class="footer" ng-class="{'col-xs-12': (examplesLeftNavShow || patternsLeftNavShow)}">
                <p><span class="glyphicon glyphicon-heart"></span> from Esri</p>
            </div>

        <!-- end shared left nav controller -->
        </div>
    <!-- end main content container -->
    </div>

    <!-- version alert controller -->
    <div ng-controller="AlertController">
        <div ng-if="showAlert" class="alert alert-warning alert-dismissible version-alert" role="alert">
            <button type="button" ng-click="hideAlert()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            This documentation is for v2 and for use with v4.x of the ArcGIS API for JavaScript.
            If you are using v3.x of the ArcGIS API for JavaScript, please see
            <a href="https://arcgis.github.io/angular-esri-map-site-v1/">the v1 documentation</a>.
        </div>
    </div>

    <!-- load Esri JavaScript API -->
    <!-- NOTE: defer is only needed b/c of UMD blocks in highlight.min.js -->
    <script defer type="text/javascript" src="https://js.arcgis.com/4.4/"></script>

    <!-- load Angular -->
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="lib/angular-route.js"></script>
    <script type="text/javascript" src="lib/angular-sanitize.js"></script>
    <script type="text/javascript" src="lib/angular-animate.js"></script>

    <!-- code snippet syntax highlighting -->
    <script src="lib/highlight.min.js"></script>
    <script src="lib/ngSelect.min.js"></script>
    <script src="lib/angular-highlightjs.min.js"></script>

    <!-- load angular-esri-map module -->
    <script src="lib/angular-esri-map.js"></script>

    <!-- load this app -->
    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/appConfig.js"></script>
    <script type="text/javascript" src="app/home/home.js"></script>
    <script type="text/javascript" src="app/patterns/patterns.js"></script>
    <script type="text/javascript" src="app/common/pathService.js"></script>
    <script type="text/javascript" src="app/common/browserDetectionService.js"></script>
    <script type="text/javascript" src="app/common/nav.js"></script>
    <script type="text/javascript" src="app/common/alertController.js"></script>
    <script type="text/javascript" src="app/common/leftNavController.js"></script>
    <script type="text/javascript" src="app/examples/snippets.js"></script>
    <script type="text/javascript" src="app/examples/examples.js"></script>
    <!-- load example pages -->
    <script type="text/javascript" src="app/examples/chaining-promises.js"></script>
    <script type="text/javascript" src="app/examples/extrude-polygon.js"></script>
    <script type="text/javascript" src="app/examples/feature-layer.js"></script>
    <script type="text/javascript" src="app/examples/geodesic-buffers.js"></script>
    <script type="text/javascript" src="app/examples/home-button.js"></script>
    <script type="text/javascript" src="app/examples/popups.js"></script>
    <script type="text/javascript" src="app/examples/property-binding.js"></script>
    <script type="text/javascript" src="app/examples/registry-pattern.js"></script>
    <script type="text/javascript" src="app/examples/scene-toggle-elevation.js"></script>
    <script type="text/javascript" src="app/examples/scene-view.js"></script>
    <script type="text/javascript" src="app/examples/search.js"></script>
    <script type="text/javascript" src="app/examples/vector-tiles.js"></script>
    <script type="text/javascript" src="app/examples/webscene-slides.js"></script>
    <script type="text/javascript" src="app/examples/webscene-slides-as-directive.js"></script>

</body>

</html>
